<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/css/admin.css" media="all"/>
</head>
<body layadmin-themealias="classic-black">
<table class="layui-table" id="song_list" lay-size="lg" lay-filter="table_demo"></table>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'element', 'laytpl', 'layer'], function () {
        var table = layui.table;
        var element = layui.element;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var $ = layui.jquery;
        table.render({
            elem: '#song_list',
            url: '/show/songlist/',
            page: true,
            toolbar: true,
            defaultToolbar: ['filter', 'print', 'exports'],
            title: '歌单',
            cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'},
                {field: 'name', width: '20%', title: '歌单名称'},
                {field: 'creator', width: 180, title: '创建人'},
                {field: 'url', width: '40%', title: '链接地址'},
                {field: 'view_counts', title: '播放量', sort: true}
            ]]
        });
        table.on('row(table_demo)', function (obj) {
            layer.open({
                type: 1,
                title: '提示',
                content: $('#table_item'),
            });
        });
        // 监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
        // 定义 layui 模板
        laytpl.config({
            open: '[[',
            close: ']]'
        });
    });
</script>
</body>
</html>